<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>无缝切播</title>
<style>
  /* 热点图样式 overflow:hidden超出部分 隐藏*/
.banner{position:relative;overflow:hidden;margin:100px auto;width:300px;height:150px;}
.banner ul{margin:0;padding:0;list-style:none;}
.hot{position:absolute;top:0;left:0;font-size: 0px;}
.hot li{float:left;}
/* 小圆点样式 */
.dot{position:absolute;bottom:10px;width:100%;text-align:center;font-size:0;}
.dot li{display:block;display:inline-block;margin:0 5px;width:15px;height:15px;border-radius:100%;background:rgba(145,144,144,.5);cursor:pointer;}
.dot .on{background-color:#fff;}
/* 左右翻页箭头样式 */
/* .arrow{display:none;} */
.arrow span{display:block;width:50px;height:100px;background:rgba(0,0,0,.6);color:#fff;text-align:center;font-size:40px;line-height:100px;cursor:pointer;}
.arrow .prev{position:absolute;top:50%;left:0;margin-top:-50px;}
.arrow .next{position:absolute;top:50%;right:0;margin-top:-50px;}
/* 5个盒子 */
.box1{width:300px;height:150px;float:left;background:red}
.box2{width:300px;height:150px;float:left;background:goldenrod}
.box3{width:300px;height:150px;float:left;background:blueviolet}
.box4{width:300px;height:150px;float:left;background:tan}
.box5{width:300px;height:150px;float:left;background:green}
</style>

</head>
<body>
	<div class="banner">
		<ul class="hot">
			<!-- 轮播图片 -->
			<li><div class="box1"></div></li>
			<li><div class="box2"></div></li>
			<li><div class="box3"></div></li>
			<li><div class="box4"></div></li>
			<li><div class="box5"></div></li>
		</ul>
		<!-- 小圆点 -->
		<ul class="dot"><li class="on"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>	
		</ul>
		<!-- 左右翻页箭头 -->
		<div class="arrow">
			<span class="prev">&lt;</span>
			<span class="next">&gt;</span>	
		</div>
	</div>
	
	<script>
	//入口函数
	$(function(){
	var width=300;
	var i=0;
	var delay=1000;
	//加图
	var firstimg=$('.hot>li:first').clone();
	//追加第一张图
	$('.hot').append(firstimg).width($('.hot>li').length*width);
	$('.next').click(autoMove)
	$('prev').click(function(){
		//i=0 i=initLast
		i ? {}:initLast();
		i--;
		moveImg();
		
	})
	function initLast(){
		$('.hot').offset({left:-($('.hot>li').length*width)})
		i=5;
	}
		
	function initFirst(){
		$('.hot').offset({left:0})
		i=1;

	}
	function moveImg(){
		$('.hot').stop().animate({left:-i*width},200)
		changeDot(i%5)
	}
	
	function changeDot(i){
		$('.dot>li').eq(i).addClass('on').siblings().removeClass('on')
	}
	// $('.dot>li').click(function(){
		
	// 	// 	i=$(this).index();
	// 	// 	moveImg();
			
	// 	// })
		
		
	// 	timer=setInterval(autoMove,delay)
	// 	//鼠标停止事件
	// 	$('.banner').hover(function(){
	// 		//箭头显示与隐藏
	// 		$('.arrow').show();
	// 		clearInterval(timer)
	// 		},function(){
	// 		$('arrow').hide();
	// 		timer=setInterval(autoMove,delay)
	
	
	
	function autoMove(){
		i++;
		i==6 ? initFirst():{},
		moveImg();
	}
	
	
	
})
	
</script>
</body>
</html>

<!-- $('.next').click(function(){
// 		//最后一张切到第一张
// 		// i=++i%5;
// 		i++;
// 		i==6 ? initFirst():{}
// 		moveImg();
// 	})
// 		//写动画 向后
// 		$('.prev').click(function(){
// 			i ? i--:i=4;
// 			// i--;
// 		moveImg();
			
// 	})
// 	// $('.dot>li').click(function(){
// 	// 	i=$(this).index();
// 	// 	moveImg();
		
// 	// })
	
	
// 	timer=setInterval(autoMove,delay)
// 	//鼠标停止事件
// 	$('.banner').hover(function(){
// 		//箭头显示与隐藏
// 		$('.arrow').show();
// 		clearInterval(timer)
// 		},function(){
// 		$('arrow').hide();
// 		timer=setInterval(autoMove,delay)
// 	})
	
// 	// //轮播图 自动轮播
// 	// function autoMove(){
	
// 	// 	i=++i%5;
// 	// 	moveImg();
// 	// }
	
// 	//无缝轮播
// 	function initFirst(){
// 		$('.hot').offset({left:0})
// 		i=1;
		
		
// 	}
	
	

// 	function moveImg(){
// 		$('.hot').stop().animate({left:-i*width},200)
// 		changeDot()
// 	}


// 	//找到dot
// 	function changeDot(){
// 		$('.dot>li').eq(i).addClass('on').siblings().removeClass('on')
			
// }
		
// }) -->